<template>
    <div class="container" style="padding: 20px 15px 0 20px;">
        <el-form size="mini" label-position="right" label-width="200px"   :inline="true" :model="Parm" class="demo-form-inline">
            <el-form-item label="菜品id：">
                <el-input style="width:600px;" v-model="Parm.id" :disabled="type=='show'" ></el-input>
            </el-form-item>
            <br  />
            <br  />
            <el-form-item label="菜品名称：">
                <el-input style="width:600px;" v-model="Parm.name" :disabled="type=='show'" ></el-input>
            </el-form-item>
            <br  />
            <el-form-item label="菜品类型：">
               <!-- <el-input  style="width:600px;" v-model="Parm.classifyId" :disabled="type=='show'" ></el-input>-->
                <el-select v-model="Parm.classifyId" placeholder="请选择菜品类型">
                <el-option
                        v-for="item in options"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>
            <br  />
            <el-form-item label="菜品价格：">
                <el-input  style="width:600px;" v-model="Parm.price"  :disabled="type=='show'"></el-input>
            </el-form-item>
            <br  />
            <el-form-item label="图片："   >
               <!-- <input id="fileinput"  @change="uploading($event)"   type="file">-->
                <div id="upload" >
                    <!--elementui的上传图片的upload组件-->
                    <el-upload style="height: 80%" class="upload-demo"
                               ref="upload"
                               action="/ApiUrl?s=/api/sudoku/uploadClock"
                               :limit="1"
                               :on-preview="handlePictureCardPreview"
                               :before-upload="beforeupload"
                               :on-exceed="exceedHandle"
                               :auto-upload="false"
                               :multiple='true'>
                        <el-button size="small" type="primary">点击上传</el-button>



                    </el-upload>
                </div>
            </el-form-item><br  />
            <el-form-item label="   ">
                <el-button size="mini" type="primary" v-show="type!='show'" @click="queren">确定添加</el-button>
                <el-button size="mini" class="btn_back"  @click="back">返回</el-button>
            </el-form-item>


            <br />
        </el-form>


    </div>
</template>

<script>

    import {mapActions, mapState} from 'vuex'
    import axios from '../../http/http'
    import qs from 'qs'
/*    import * as api from '../../http/api'
    import bus from '../../bus'*/

    export default {
        props: {
            row: {}
        },
        name: 'Edit',
        data () {
            return {
                options:[],
                code:'',
                type:'',
                file:'',
                src:'',
                loading:false,
                Parm: {
                    id:'',
                    name:'',
                    classifyId:'',
                    price:'',
                    picture:'',
                },
                formData :'',
                company_id: '10001',
                dialogImageUrl: '',
                dialogVisible: false,
                fileList: [],
                form: {// form里面的参数
                    // name: ''
                },
                param: '', // 表单要提交的参数
                src: '' ,// 展示图片的地址
                dropdowndata:{

                }

            }
        },
        created(){
            if(this.row==undefined){

            }else{
                this.Parm = this.row
            }
            this.getleixing1()
        },
        methods:{
          /*  ...mapActions(['getleixing']),*/
            getleixing1() {
                let data= {
                    "currentPage": 1,
                    'pageSize':999
                }
              /*  let config={
                    headers:{ 'Content-Type':'multipart/form-data'}
                }*/
                axios.post('rms/menu/classify/select',data).then(res => {
                   /* console.log(987456)
                    console.log(res)*/
                    this.options=res.data.list
                   /* console.log(config)*/
                }).catch(error=>{

                })

            },

            back(){
                this.$emit("onGoBack")
            },

            queren(){

                    this.$refs.upload.submit()
                    if(this.fileList.length==0){
                        this.formData = new FormData()
                    }

                    if(this.Parm.name!==null){
                        /*console.log("name!")*/
                        this.formData.append('name',this.Parm.name);
                    }
                    if(this.Parm.id!==null){
                       /* console.log("id!")*/
                        this.formData.append('id',this.Parm.id);
                    }
                    if(this.Parm.classifyId!==null){
                   /*     console.log("classifyId!")*/
                        this.formData.append('classifyId',this.Parm.classifyId);
                    }
                    if(this.Parm.price!==null){
                        this.formData.append('price',this.Parm.price);
                    }
                 /*   console.log(this.formData.get('name'))
                    console.log(this.formData.get('picture'))*/

                let data={
                    'id': this.Parm.id,
                    "name": this.Parm.name,
                    "classifyId": this.Parm.classifyId,
                    "price": this.Parm.price,
                    "picture": this.formData.get('picture')
                }
              /*  console.log(data)
                console.log(this.Parm.classifyId)*/
                let config={
                   headers:{ 'Content-Type':'multipart/form-data'}
                }
                    axios.post('rms/menu/setting/add',this.formData,config).then(res => {
                  /*      console.log(987456)
                        console.log(res)
                        console.log(config)*/
                    }).catch(error=>{

                    })

            },


            // 1，上传前移除事件
            beforeRemove (file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`)
            },
            // 2，上传前事件
            beforeupload (file) {
                // 2.1，重新写一个表单上传的方法
                this.formData = new FormData()
                this.fileList.push(file) // 把单个文件变成数组
                //上传操作前将file放进form
                this.formData.append("picture",file)
                return false
            },
            // 3，点击文件列表中已上传的文件时的钩子
            handlePictureCardPreview (file) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            },

            // 5设置超过给与提示
            exceedHandle () {
                this.$message({
                    message: '超过上传最大数目',
                    type: 'warning'
                });
            }




        }

    };
</script>

<style scoped>
    /deep/ .el-upload--text {
        height: 33px;
        width: 80px;
    }
    /deep/ .el-upload--text{
        border: 0px;

    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>
